<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="/webdot/icon.png">
<title>WebDot Tutorial: GraphQuest - pan &amp; zoom &amp; client-side maps</title>
</head>
<body bgcolor="white">
<a href="/cgi-bin/webdot/webdot/tclembed.html">[previous]</a>
<a href="/webdot/index.html">[next]</a>
<font size="+2"><b>WebDot Tutorial: GraphQuest - pan &amp; zoom &amp; client-side maps</b></font>
<p>
<iframe
  name="gq"
  src="/cgi-bin/webdot/webdot/graphquest.dot.neato.gq.300,300"
  width="360"
  height="340"
  frameborder="0"
  scrolling="no"
></iframe>
<p>
Webdot can convert the graph into the contents of an &lt;iframe&gt;
with a graph image, pan &amp; zoom controls, and client-side
mapping of the graph objects.
<p>
For example, graphquest.dot contains:
<table border="1"><tr><td><pre>
graph G {
        node [URL="\N.html" target="new" label="" tooltip="Node \N" width=0.3 height=0.3 style=filled fillcolor=lightblue pencolor=black]
        a -- b -- c -- d -- e; f -- g -- c -- h -- i; j -- k -- c;
}
</pre></td></tr></table>
and the source of this page contains (for the graph above):
<table border=1><tr><td><pre>
&lt;iframe
  name="gq"
  src="/cgi-bin/webdot/webdot/graphquest.dot.neato.gq.300,300"
  width="360"
  height="340"
  frameborder="0"
  scrolling="no"
&gt;&lt;/iframe&gt;
</pre></td></tr></table>
<p>
The advantages of this mode of WebDot are simple authoring and
the responsiveness of client-side mapping.  Notice that the URL that
would be reached by clicking on a node is flashed into the
status bar at the bottom of the browser.
<p>
One disadvantage is that there is no guarantee that a graph will fit the frame
at the initial zoom setting, possibly requiring the user to zoom to see
the whole graph.
<p>
The size of the image does not depend on the contents of the graph,
but is fixed by the viewport dimensions specified in the URL,
300x300 in this example.
This eases page design.
The width and height of the &lt;iframe&gt; needs to be 60 wider and 40 higher
than the graph image to allow for the pan&amp;zoom controls.
<p>
The &lt;iframe&gt; must be named "gq" for the pan&amp;zoom updates to be
correctly targeted.
</body>
</html>
